<template>
	<view class="wrap">
		<u-waterfall v-model="productList">
			<template v-slot:left="{leftList}">
				<view class="pro-item" v-for="pro in leftList" :key="pro.productUuid" @click="detail(pro.productUuid)">
					<view class="content">
						<view class="pri_pic">
							<image :src="'http://yihao.cdn.gd-zjgj.com/' + pro.productImg" mode="widthFix" lazy-load>
							</image>
						</view>
						<view class="pro-desc">
							<view class="title">
								{{pro.productTitle}}
							</view>
							<view class="price">
								￥{{dealPrice(pro.productPrice)}}
							</view>
							<view class="text" v-if="pro.productFeatures !== ''">
								{{pro.productFeatures}}
							</view>
							<view class="shop" v-if="pro.mallMerchantName !== ''">
								{{pro.mallMerchantName}}
							</view>
						</view>
					</view>

				</view>

			</template>
			<template v-slot:right="{rightList}">
				<view class="pro-item" v-for="pro in rightList" :key="pro.productUuid" @click="detail(pro.productUuid)">
					<view class="content">
						<view class="pri_pic">
							<image :src="'http://yihao.cdn.gd-zjgj.com/' + pro.productImg" mode="widthFix" lazy-load>
							</image>
						</view>
						<view class="pro-desc">
							<view class="title">
								{{pro.productTitle}}
							</view>
							<view class="price">
								￥{{dealPrice(pro.productPrice)}}
							</view>
							<view class="text" v-if="pro.productFeatures !== ''">
								{{pro.productFeatures}}
							</view>
							<view class="shop" v-if="pro.mallMerchantName !== ''">
								{{pro.mallMerchantName}}
							</view>
						</view>
					</view>

				</view>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	export default {
		name: "CartRecommend",
		data() {
			return {
				productList: [],
			};
		},
		methods: {
			requestRecommendList() {
				request.globalRequest({
					url: "/api/public/mall/product/home_top",
					data: {
						mallType: 1,
						page: 1,
						size: 20
					}
				}).then(({
					list
				}) => {
					if (list.length > 0) {
						this.productList = [...this.productList, ...list]
						this.page++
						if (list.length < 20) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}

					}

				})
			},
			dealPrice(price) {
				price = (price / 100).toFixed(2)
				return price
			},
			// 前往商品详情页面
			detail(uuid) {
				uni.navigateTo({
					url: "/pages/productdetail/productdetail?uuid=" + uuid
				})
			}
		},
		created() {
			this.requestRecommendList()
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin-top: 20rpx;
	}

	.pro-item {
		padding: 0 10rpx 10rpx;
		margin-bottom: 20rpx;

		.content {
			background-color: #fff;
			padding-bottom: 20rpx;

			.pri_pic {
				padding: 0 10rpx;

				image {
					width: 100%;
				}
			}

			.pro-desc {
				margin-top: 20rpx;
				font-size: 28rpx;
				padding: 0 20rpx;


				.title {
					color: #919191;
					max-width: 300rpx;
					line-height: 48rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.price {
					color: #FF4A5C;
					font-weight: 600;
					line-height: 60rpx;
				}

				.text {
					color: #fff;
					max-width: 240rpx;
					white-space: nowrap;
					overflow: hidden;
					padding: 0 20rpx;
					font-size: 24rpx;
					text-overflow: ellipsis;
					border-radius: 999rpx;
					background-color: #FA3534;
				}

				.shop {
					font-size: 24rpx;
					color: #ccc;
					padding: 10rpx 0;
				}
			}
		}


	}
</style>
